<!-- 已支付-详情 -->
<template>
  <div class="index-container">
    <div class="banxing">
      <div class="imgs">
        <img :src="list.image" alt />
      </div>
      <div style="width:100%">
        <div class="banxing_title">{{list.name}}</div>
        <div class="banxing_sku">{{list.sku_name}}</div>
        <div class="grid_time">
          <van-button round @click="toStudy">去学习</van-button>
          <span class="grid_status">交易成功</span>
        </div>
      </div>
    </div>
    <div class="jiange"></div>
    <van-cell-group inset>
      <van-field v-model="list.sn" label="订单号：" />
      <van-field v-model="list.addtime" label="下单时间：" />
      <van-field v-model="list.pay_time" label="支付时间：" />
    </van-cell-group>
    <div class="jiange"></div>
    <van-cell-group inset>
      <van-field v-model="zhifufangshi" label="支付方式：" class="zhifu" />
      <van-field v-model="list.price" label="商品金额：" />
      <van-field v-model="list.pay_amount" label="实付金额：" class="shifu" />
    </van-cell-group>
    <div class="jiange"></div>
    <van-field label="收货地址：" />
    <van-field v-model="list.express_name + '        ' + list.express_phone" />
    <van-field
      v-model="list.express_province + list.express_city + list.express_town + list.express_addr"
    />
    <div></div>
  </div>
</template>

<script>
import moment from 'moment'
import { detailOrders } from '@/api/mine/order'
export default {
  data() {
    return {
      dingdanhao: '2020112900876573',
      xiaodan: '2018-05-25  15:08:23',
      zhifu: '2018-05-25  15:08:23',
      zhifufangshi: '微信支付',
      shangpinjine: '¥11800',
      shifujine: '¥10800',
      name: '王派学员1    18812345678',
      dizhi: '湖北省武汉市洪山区关山街道光谷时代广场A座1102',
      list: {}
    }
  },

  computed: {},

  mounted() {
    this.fetchList()
  },

  methods: {
    // 获取个人信息
    fetchList() {
      const data = {
        sn: JSON.parse(decodeURIComponent(this.$route.query.row)).sn
      }
      detailOrders(data).then(res => {
        this.list = res.data
        this.list.addtime = moment(this.list.addtime * 1000).format('YYYY-MM-DD HH:mm:ss')
        this.list.pay_time = moment(this.list.pay_time * 1000).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    toStudy() {
      const data = {
        id: this.list.goods_id
      }
      if (this.list.shift_type == 'pack') {
        this.$router.push({ path: '/pack-details', query: data })
      }
      if (this.list.shift_type == 'open') {
        this.$router.push({ path: '/open-detail', query: data })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.jiange {
  height: 10px;
  background: #f7f7f7;
}
.banxing {
  padding: 15px;
  display: flex;
  .imgs {
    margin-right: 9px;
    img {
      width: 112px;
      height: 75px;
      border-radius: 5px;
      overflow: hidden;
    }
  }
}
.divider {
  margin: 15px 0px;
}
.banxing_title {
  // height: 40px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.banxing_sku {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}
.grid_time {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  .van-button {
    width: 65px;
    height: 21px;
    padding: 0;
    background: #11a8a4;
    border: 1px solid #089793;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
  }
  .grid_status {
    float: right;
    font-size: 14px;
    font-weight: 500;
    color: #fd953f;
  }
}

::v-deep .van-cell__title {
  color: #999999;
}
::v-deep .zhifu .van-field__control {
  color: #11a8a4 !important;
}
::v-deep .shifu .van-field__control {
  color: #fd953f !important;
}
</style>
